<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="110px"
          class="demo-formModel"
        >

          <!-- 年度 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="年度" prop="nd">
                <el-input v-model="formModel.nd" placeholder="请输入年度" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学期" prop="xq">
                <el-input v-model="formModel.xq" placeholder="请输入学期" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所教学生层次" prop="sjxscc">
                <el-select
                  v-model="formModel.sjxscc"
                  placeholder="请选择所教学生层次"
                  class="el_select"
                >
                  <el-option
                    v-for="item in schoolList"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 任教课程 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="任教课程" prop="rzkc">
                <el-input v-model="formModel.rzkc" placeholder="请输入任教课程" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任课状况" prop="rjzk">
                <el-input v-model="formModel.rjzk" placeholder="请输入任教状况" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现主要负责专业" prop="fzzy">
                <el-input v-model="formModel.fzzy" placeholder="请输入现主要负责专业" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任教形式" prop="zjxs">
                <el-input v-model="formModel.zjxs" placeholder="请输入任教形式" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否为专业主持教师" prop="zyzcjs">
                <el-select
                  v-model="formModel.zyzcjs"
                  placeholder="请选择所教学生层次"
                  class="el_select"
                >
                  <el-option
                    v-for="item in sellist"
                    :label="item.name"
                    :value="item.name"
                    :key="item.val"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="教学评价结果" prop="jxpjjg">
                <el-input v-model="formModel.jxpjjg" placeholder="请输入课程教学课时" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 课程教学课时 -->
          <el-row>

            <el-col :span="8">
              <el-form-item label="课程教学课时" prop="kcjxks">
                <el-input v-model="formModel.kcjxks" placeholder="请输入课程教学课时" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属专业" prop="sszy">
                <el-input v-model="formModel.sszy" placeholder="请输入所属专业" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属专业" prop="jxxi">
                <el-input v-model="formModel.jxxi" placeholder="请输入所属专业" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="团队信息" prop="tdxx">
                <el-input v-model="formModel.tdxx" placeholder="请输入团队信息" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册课程学生人数" prop="xsrs">
                <el-input v-model="formModel.xsrs" placeholder="请输入注册课程学生人数" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="btns">
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm('formModel')"
                >{{ btnname }}
                </el-button
                >
                <el-button @click="resetForm('formModel')">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'studyexp',
  data () {
    return {
      cityList: [
        {name: '中国', val: 0},
        {name: '香港', val: 1},
      ],
      educationList: [
        {name: '小学', val: 0},
        {name: '大学', val: 1},
      ],
      schoolList: [
        {name: 'xxx学院', val: 0},
        {name: 'xxx学院', val: 1},
      ],
      sellist: [
        {name: '否', val: 0},
        {name: '是', val: 1},
      ],

      imageUrl: '',
      formModel: {
        jsId: '',
        nd: '',
        xq: '',
        sjxscc: '',
        rzkc: '',
        rjzk: '',
        fzzy: '',
        zjxs: '',
        jxpjjg: '',
        kcjxks: '',
        sszy: '',
        jxxi: '',
        tdxx: '',
        xsrs: '',
      },
      rules: {
        nd: [
          {required: true, message: '请输入年度', trigger: 'blur'},
        ],
        xq: [
          {required: true, message: '请输入学期', trigger: 'blur'},
        ],
        sjxscc: [
          {required: true, message: '请选择所教学生层次', trigger: 'blur'},
        ],
        rzkc: [
          {required: true, message: '请输入任教课程', trigger: 'blur'},
        ],
        rjzk: [
          {required: true, message: '请输入任教状况', trigger: 'blur'},
        ],
        fzzy: [
          {required: true, message: '请输入负责专业', trigger: 'blur'},
        ],
        zjxs: [
          {required: true, message: '请输入任教形式', trigger: 'blur'},
        ],
        zyzcjs: [
          {required: true, message: '请输入是否为专业主持教师', trigger: 'blur'},
        ],
        jxpjjg: [
          {required: true, message: '请输入教学评价结果', trigger: 'blur'},
        ],
        kcjxks: [
          {required: true, message: '请输入课程教学课时', trigger: 'change'},
        ],
        sszy: [
          {required: true, message: '请输入所属专业', trigger: 'change'},
        ],
        jxxi: [
          {required: true, message: '请输入教学信息', trigger: 'change'},
        ],
        tdxx: [
          {required: true, message: '请输入团队信息', trigger: 'change'},
        ],
        xsrs: [
          {required: true, message: '请输入注册课程学生人数', trigger: 'change'},
        ],
      },
      btnname: '添加',
      page: {
        id: '',
        op: 'add'
      },
    }
  },
  mounted () {
    this.initdata()
  },
  methods: {
    initdata () {
      var params = this.$route.params
      console.log(params)
      this.page.id = params.id
      this.page.op = params.op
      this.get_detail()
    },
    get_detail () {
      var params = {jsId: this.page.id}
      this.$http({
        url: this.$http.adornUrl('/jxxx/getJsAllJxxx'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({data}) => {
        console.log(data.data)
        if (data && data.code === 0) {
          if (data.data.length > 0) {
            this.page.op = 'detail'
            this.btnname = '修改'
            this.formModel = data.data[0]
          } else {
            this.page.op = 'add'
            this.btnname = '添加'
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    submitForm (formName) {
      this.formModel.jsId = this.$store.state.user.jsid
      let formData = this.get_formdata(this.formModel)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = ''
          if (this.page.op == 'detail') {
            url = '/jxxx/save'
          } else {
            url = '/jxxx/update'
          }
          this.$http({
            url: this.$http.adornUrl(url),
            data: formData,
            method: 'post'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message.success('添加教学信息成功！')
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    get_formdata (config) {
      console.log(config)
      //对象转formdata格式
      const formData = new FormData()
      //循环传入的值转换formData
      Object.keys(config).forEach((key) => {
        formData.append(key, config[key])
      })
      return formData
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>


<style>
.single {
  padding: 0.5rem;
}

.el_select {
  width: 15rem;
}

.btns {
  padding-left: 22rem;
}
</style>

